<template>
  <el-table
    class="driver-list-container"
    border fit highlight-current-row
    :data="driverList">
    <el-table-column v-for="(col, colIndex) in tableCols"
                     :type="col.type"
                     :index="col.index"
                     :key="col.prop"
                     :prop="col.prop"
                     :label="col.label"
                     :width="col.width">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="editDriver(scope.row)" type="text" size="small">编辑</el-button>
        <el-button @click="deleteDriver(scope.row)" type="text" size="small" style="color: red">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
    export default {
        name: 'DriverList',
        data() {
            return {
              tableCols:[
                // 序号
                {type: 'index', index:1},
                // 驾驶员姓名
                {prop:'name', label:'驾驶员姓名'},
                // 驾驶员类型
                {prop:'model', label:'驾驶员类型'},  // TODO 未找到数据库对应字段
                // 身份证号码
                {prop:'cardno', label:'身份证号码'}, // db中分证件类型、证件号码
                // 驾龄
                {prop:'age', label:'驾龄'},
                // 驾驶证有效期
                {prop:'licenseValid', label:'驾驶证有效期'},
                // 常用车辆
                {prop:'name', label:'常用车辆'},        // TODO 未找到数据库对应字段
                // 操作
              ]
            }
        },
      computed:{
        driverList(){
          return this.$store.state.driverList;
        }
      },
      methods:{
        editDriver(row){
            this.$emit('edit',row)
          },
        deleteDriver(row){
            this.$emit('del', row)
        }
      }
    }
</script>

<style lang="stylus" scoped>
  .driver-list-container
    margin-top: 15px
</style>
